<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.min.js"></script>
    <script src="KLine.js"></script>
    <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="html54stock.0314/libs/loading.js" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/util.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/absPainter.js" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/ajax.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/crossLines.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/axis-x.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/linepainter.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/volumePainter.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/axis-y.js?a" type="text/javascript" charset="GBK"></script>
    <script src="html54stock.0314/libs/chartEventHelper.js?a" type="text/javascript" charset="GBK"></script>
    <script src="FenShi.js"></script>
    <script src="html54stock.0314/mins-data.js"></script><!---->

    <script type="text/javascript">
        //计时器
        var timer;
        //按钮文本，false为白色，true为黑色
        var btnColor = false;
        //处理数据，绘制图形
        function myFun() {
            //请求k线历史数据
            $.post("http://121.43.171.137:65530/gppz/index.php/Home/Index/historyKline",{kline:"0"},function(data){
                if(data !=''){
                    //处理获取到的历史数据
                    managerHistory(data);
                    myChart = echarts.init(document.getElementById('main'));
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(getOption());
                    //添加计时器,请求实时数据
                    timer = self.setInterval("timedCount()",2000);
                }
            });
        }
        //添加计时器,请求实时数据
        function timedCount()
        {
            $.post("http://121.43.171.137:65530/gppz/index.php/Home/Index/Kline",{kline:"0"},function(data){
                if(data !=''){
                    setData(data);
                    myChart.setOption(getOption());
                }
            });
        }

        //改变k线底的颜色
        function changeColor() {
            if(!btnColor){
                btnColor = true;
                document.getElementById("btn").innerHTML = "黑色";
                document.getElementById("main").style.backgroundColor = "#27262E";
            }else{
                btnColor = false;
                document.getElementById("btn").inn0erHTML = "白色";
                document.getElementById("main").style.backgroundColor = "transparent";
            }
        }
    </script>
</head>

<body onload="myFun()">
    <div>
        <!--background-color: #27262E-->
        <div id="main" style="width: 1285px;height:545px;"></div>
        <button type="button" id = "btn" onclick="changeColor()">白色</button>
        <!--<canvas id="canvas" width="414" height="310" style="z-index: 3; background: transparent;-->
        <!--border: 1px solid #69c"></canvas>-->
    </div>

    <!--<script type="text/javascript">-->
        <!--// 基于准备好的dom，初始化echarts实例-->
        <!--var myChart = echarts.init(document.getElementById('main'));-->
        <!--// 使用刚指定的配置项和数据显示图表。-->
        <!--myChart.setOption(getOption());-->
    <!--</script>-->

    <!--<script type="text/javascript">-->
        <!--var chart = new minsChart('canvas', {-->
            <!--fallColor: 'green', riseColor: 'red', normalColor: 'black', maxDotsCount: 241, needPaintAvgPriceLine: false,-->
            <!--backgroundColor:'white',-->
            <!--topText: { font: '12px 宋体', color: 'black', region: { x: 58.5, y: 5.5, width: 305, height: 14 }, textBaseline: 'top' },-->
            <!--minsChart: {-->
                <!--region: { x: 56.5, y: 21.5, width: 310, height: 200 },-->
                <!--priceLineColor: 'blue', avgPriceLineColor: 'red', middleLineColor: 'red', otherSplitLineColor: 'lightgray', borderColor: 'gray',-->
                <!--horizontalLineCount: 7, verticalLineCount: 3,-->
                <!--yScalerLeft: { font: '12px Arial', region: { x: .5, y: 20, width: 50.5, height: 200 }, align: 'right', fontHeight: 9, textBaseline: 'top' },-->
                <!--yScalerRight: { font: '12px Arial', region: { x: 368.5, y: 20, width: 40.5, height: 200 }, align: 'right', fontHeight: 9, textBaseline: 'top' }-->
            <!--},-->
            <!--xScaler: {-->
                <!--font: '12px Arial', color: 'black',-->
                <!--region: { x: 56.5, y: 225, width: 310, height: 20 },-->
                <!--data: ['09:30', '10:30', '11:30/13:00', '14:00', '15:00']-->
            <!--},-->

            <!--//bottomText: { font: '11px 宋体', color: 'black', region: { x: 5.5, y: 260, width: 400, height: 20} },-->
            <!--volume: {-->
                <!--region: { x: 56.5, y: 245.5, width: 310, height: 60 },-->
                <!--bar: { color: 'green', width: 2 },-->
                <!--borderColor: 'lightgray', splitLineColor: 'lightgray',-->
                <!--yScaler: { font: '12px Arial', region: { x: .5, y: 242.5, width: 50.5, height: 60 }, color: 'black', align: 'right', fontHeight: 12, textBaseline: 'top' }-->
            <!--}-->
        <!--});-->
        <!--var data = getQuote();-->
        <!--chart.paint(data);-->
    <!--</script>-->


</body>
</html>